<template>
  <div class="calendar-top">
    <div class="date-select">
      <select v-model="year">
        <option v-for="item in years" :key="item" :value="item">{{ item }}年</option>
      </select>
      <span @click="lastMonth" class="month-btn"> &lt; </span>
      <select v-model="month">
        <option v-for="item in months" :key="item" :value="item">{{ item }}月</option>
      <span @click="nextMonth" class="month-btn"> &gt; </span>
      </select>
      <span @click="nextMonth"> &gt; </span>
    </div>
    <div class="today">
      <button @click="backToToday">今天</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia'

import { createYears, createMonths } from '@/utils'
import { useCalendarStore } from '@/stores/calendar'

const { year, month } = storeToRefs(useCalendarStore())
const { lastMonth, nextMonth, backToToday } = useCalendarStore()
// console.log(year, month)
const years = ref([])
const months = ref([])
// 初始化本地状态
onMounted(() => {
  years.value = createYears()
  months.value = createMonths()
})
</script>

<style lang="scss" scoped>
.calendar-top {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 50px;
  background-image: linear-gradient(
    180deg,
    rgba(78, 110, 242, 0.2) 0%,
    rgba(78, 110, 242, 0) 100%
  );
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 16px 16px 0 0;
  border: 1px solid #4e6ef2;
  border-bottom: none;
  .month-btn{
    border-radius: 5px;
  }
  .data-select {
    color: #333;
    select {
      padding: 4px 10px;
      border: 1px solid #4e6ef2;
      border-radius: 6px;
      background-color: #f0f5ff;
      color: #4e6ef2;
      &:hover {
        border: 1px solid #4e6ef2;
        cursor: pointer;
        background-color: #e1ebff;
      }
      user-select: none;
    }
    span {
      user-select: none;
      cursor: pointer;
      color: #4e6ef2;
      font-weight: bold;
      padding: 4px 12px;
      border-radius: 4px;
      &:hover {
        background-color: #e1ebff;
      }
    }
  }
  .today {
    button {
      padding: 4px 10px;
      border: 1px solid #4e6ef2;
      border-radius: 6px;
      background-color: #4e6ef2;
      color: white;
      &:hover {
        background-color: #3a56d4;
        cursor: pointer;
      }
    }
  }
}
</style>